<template>
  <div class="hardware padbottom">
    <div class="module">
      <van-cell-group>
        <van-field
          v-if="!isCheck"
          v-model="hardwareInfo.database_server_name"
          label="数据库服务器"
          input-align="right"
          label-class="labelColor"
          @click="chooseHardware()"
          placeholder="请选择"
          is-link
          readonly
          arrow-direction="down"
        />
        <van-field
          v-else
          v-model="hardwareInfo.database_server_name"
          label-width="13em"
          label="数据库服务器"
          input-align="right"
          label-class="labelColor"
          :readonly="isCheck"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.database_expect_invest"
          label-width="13em"
          label="数据库服务器预计投入(万元)"
          input-align="right"
          label-class="labelColor"
          :readonly="isCheck"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.cpu_quantity"
          label="CPU数量"
          input-align="right"
          label-class="labelColor"
          :readonly="isCheck"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.memory_quantity"
          label="内存数量"
          input-align="right"
          :readonly="isCheck"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.application_server"
          label-width="12em"
          label="应用服务器数量4C8(台)"
          :readonly="isCheck"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.application_server_invest"
          label-width="16em"
          :readonly="isCheck"
          label="应用服务器数量4C8预计投入(万元)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.san_storage_space"
          label-width="10em"
          label="SAN存储空间(GB)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.san_storage_space_invest"
          label-width="13em"
          :readonly="isCheck"
          label="SAN存储空间预计投入(万元)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.nac_storage_space"
          label-width="10em"
          :readonly="isCheck"
          label="NAC存储空间(GB)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.nac_storage_space_invest"
          label-width="13em"
          :readonly="isCheck"
          label="NAC存储空间预计投入(万元)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.dmz_server"
          label-width="7em"
          :readonly="isCheck"
          label="DMZ服务器(台)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.dmz_server_invest"
          label-width="12em"
          :readonly="isCheck"
          label="DMZ服务器预计投入(万元)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
        <van-field
          v-model="hardwareInfo.dedicated_line_expect_invest"
          label-width="9em"
          :readonly="isCheck"
          label="专线预计投入(万元)"
          input-align="right"
          label-class="labelColor"
          placeholder="请输入"
        />
      </van-cell-group>
    </div>
    <div v-if="isCurrentNode" class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
    <van-popup position="bottom" get-container="body" v-model="showOption">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirmOption"
        @cancel="showOption = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  hardwareServe,
  serviceHardware,
  serviceHardwareSubmit,
} from "@/api/service.js";
import { Toast } from "vant";
export default {
  props: ["id", "currentNode"], //服务单id
  data() {
    return {
      hardwareInfo: {
        database_server: "",
        database_server_id: "",
        database_expect_invest: "",
        cpu_quantity: "",
        memory_quantity: "",
        application_server: "",
        application_server_invest: "",
        san_storage_space: "",
        san_storage_space_invest: "",
        nac_storage_space: "",
        nac_storage_space_invest: "",
        dmz_server: "",
        dmz_server_invest: "",
        dedicated_line_expect_invest: "",
      },
      servicer: "", //服务器
      actions: [{ name: "OA流程" }, { name: "审批记录" }],
      showMoreOpera: false,
      showOption: false,
      optionData: "",
      columns: [],
      isCheck: false,
      isCurrentNode: true,
    };
  },
  mounted() {
    console.log(this.id);
    if (this.id) {
      this.getHardware();
      this.getOption();
      this.checkNode()
    }
  },
  methods: {
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    //检查是否是当前节点
    checkNode() {
      console.log(this.currentNode);
      if (
        this.currentNode == "T10016" ||
        this.currentNode == "T10335" 
      ) {
        this.isCurrentNode = true;
      } else {
        this.isCurrentNode = false;
      }
      if( this.currentNode == "T10016"){
        this.isCheck = false;
      }else{
        this.isCheck = true;
      }
      console.log(this.isCheck)
    },
    submit() {
      serviceHardwareSubmit({
        database_server_id: this.hardwareInfo.database_server_id,
        database_server_name:this.hardwareInfo.database_server_name,
        database_expect_invest: this.hardwareInfo.database_expect_invest,
        cpu_quantity: this.hardwareInfo.cpu_quantity,
        memory_quantity: this.hardwareInfo.memory_quantity,
        application_server: this.hardwareInfo.application_server,
        application_server_invest: this.hardwareInfo.application_server_invest,
        san_storage_space: this.hardwareInfo.san_storage_space,
        san_storage_space_invest: this.hardwareInfo.san_storage_space_invest,
        nac_storage_space: this.hardwareInfo.nac_storage_space,
        nac_storage_space_invest: this.hardwareInfo.nac_storage_space_invest,
        dmz_server: this.hardwareInfo.dmz_server,
        dmz_server_invest: this.hardwareInfo.dmz_server_invest,
        dedicated_line_expect_invest:
          this.hardwareInfo.dedicated_line_expect_invest,
        server_id: this.id,
        node_id:this.currentNode
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          Toast("提交成功");
          this.$router.push({
            path:'/service/node-flow',
            query:{
              id:this.id,
              source: this.currentNode,
            }
          })
        }else{
          Toast(res.message);
        }
      });
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
    getHardware() {
      serviceHardware({
        server_id: this.id,
        node_id:this.currentNode
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (res.data.hardware && res.data.hardware.application_server) {
            for (var i = 0; i < this.servicer.length; i++) {
              if (this.servicer[i].id == res.data.hardware.database_server_id) {
                res.data.hardware.database_server = this.servicer[i].value;
              }
            }
            this.hardwareInfo = res.data.hardware;
            
          }
        }
      });
    },
    //选项
    chooseHardware() {
      this.showOption = true;
    },
    getOption() {
      this.columns = [];
      hardwareServe().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.servicer = res.data;
          for (var i = 0; i < res.data.length; i++) {
            this.columns.push(res.data[i].value);
          }
        }
      });
    },
    onConfirmOption(value, index) {
      console.log(value, index);
      this.hardwareInfo.database_server_name = value;
      this.hardwareInfo.database_server_id = this.servicer[index].id;
      this.showOption = false;
    },
  },
};
</script>

<style lang="less" scoped>
.hardware.padbottom {
  padding-bottom: 100px;
}
.module {
  margin-top: 12px;
}
/deep/.labelColor {
  color: rgba(49, 53, 65, 0.6);
}
/deep/.van-field__control {
  color: #313541;
}
.form-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 34px;
  padding: 13px 15px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  .btn {
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .btn-color1 {
    background: rgba(147, 157, 173, 0.18);
    color: #313541;
  }
  .btn-color3 {
    background: #009966;
    color: #fff;
  }
}
</style>